<template>
  <div class='opinion-list bc-white'>
    <ul>
      <li v-for="(item,index) in listData" :key="index" @click="showDetail(item)">
        <p class="item1">
          <span>{{item.name}}</span>
          <span class="fr">{{item.apply_date}}</span>
        </p>
        <p class="item2">
          <span>{{item.class}}</span>
          <span class="fr">联系方式：<span class="color-green" @click="telTo(item.tel_number)" >{{item.tel_number}}</span></span>
        </p>
        <p class="item3">
          <span>{{item.apply_type}}</span>
        </p>
        <p class="item4">{{item.apply_reason}}</p>
      </li>
    </ul>
    <p class="no-data" v-if="formatListData.length===0">暂时没有数据哦~</p>
  </div>
</template>
<script>
export default {
  props:['listData','routerDetail'],
  components: {},
  name: "",
  data() {
    return {};
  },
  computed:{
    formatListData(){
      return this.listData||[]
    }
  },
  methods:{
    showDetail(item){
      // if(this.routerDetail)this.routerDetail(item)
    },

    telTo(phone){
      _g.telTo(phone)
    }
  }
};
</script>
<style lang="scss" scoped>
.opinion-list {
  li{
    padding: 20px 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #efeff4;

    .item1{
      color: #666;
      font-size: 13px;
      span:nth-of-type(1){
        font-size: 16px;
        color: #4a90e2;
        height: 50px;
        line-height: 50px;
      }
    }
    .item2{
      font-size: 13px;
      margin-top: 5px;
    }
    .white-space{
      font-size: 13px;
      margin-top: 10px;
    }
  }
}
</style>